<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">

      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('home.equipmentNumber')" :total="equipmentTotalSum10 | CustomizedFormat('个')">
          <a-tooltip title="所有设备的数量，包括网关、灯、LED屏、传感器、摄像头、音柱" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <a-icon type="cloud-server" :style="{ fontSize: '70px', color: '#08c' ,position:'absolute',top:'-90px',right:'30px'}"/>
          <template slot="footer">{{$t('home.equipmentNumber')}}</template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('home.onlineRate')" :total="equipmentTotalSum13 | PercentageFormat">
          <a-tooltip title="设备的在线率，包括网关、LED屏、传感器、摄像头、音柱" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <a-icon type="cloud-upload" :style="{ fontSize: '70px', color: '#08c' ,position:'absolute',top:'-90px',right:'30px'}"/>
          <template slot="footer">{{$t('home.onlineRate')}}</template>
        </chart-card>
      </a-col>


      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('home.numberofstreetLampfailures')" :total="equipmentTotalSum21 | CustomizedFormat('个')">
          <a-tooltip :title="$t('home.numberofstreetLampfailures')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <a-icon type="cloud-download" :style="{ fontSize: '70px', color: '#08c' ,position:'absolute',top:'-90px',right:'30px'}"/>
          <template slot="footer">{{$t('home.numberofstreetLampfailures')}}</template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('home.totalElectricityConsumptioninTheYear')" :total="equipmentTotalSum31 | CustomizedFormat('KWH')">
          <a-tooltip :title="$t('home.totalElectricityConsumptioninTheYear')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <a-icon type="monitor" :style="{ fontSize: '70px', color: '#08c' ,position:'absolute',top:'-90px',right:'30px'}"/>
          <template slot="footer">{{$t('home.totalElectricityConsumptioninTheYear')}}</template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('home.averageAnnualpower')" :total="equipmentTotalSum41 | CustomizedFormat('W')">
          <a-tooltip :title="$t('home.averageAnnualpower')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <a-icon type="thunderbolt" :style="{ fontSize: '70px', color: '#08c' ,position:'absolute',top:'-90px',right:'30px'}"/>
          <template slot="footer">{{$t('home.averageAnnualpower')}}</template>
        </chart-card>
      </a-col>

    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">

          </div>
          <a-tab-pane loading="true" :tab="$t('home.averageMonthlyElectricityConsumption')" key="1">
            <line-chart-multid class="statistic" :title="$t('home.averageMonthlyElectricityConsumption')" :dataSource="countSource" :fields="countFields" :aliases="countAliases" :height="countHeight"/>
          </a-tab-pane>
          <a-tab-pane :tab="$t('home.averageAnnualElectricityConsumption')" key="2">
            <line-chart-multid class="statistic" :title="$t('home.averageAnnualElectricityConsumption')" :dataSource="countSource1" :fields="countFields1" :aliases="countAliases1" :height="countHeight"/>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>


  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'

  import Trend from '@/components/Trend'
  import { getLoginfo,getVisitInfo } from '@/api/api'
  import { httpAction } from '@/api/manage'
  import { getAction } from '@/api/manage'
  import moment from 'moment';


  export default {
    name: "IndexChart",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,
      HeadInfo
    },
    data() {
      return {
        countHeight:350,
        loading: true,
        center: null,
        equipmentTotalSum10:"",
        equipmentTotalSum11:"",
        equipmentTotalSum12:"",
        equipmentTotalSum13:"",
        equipmentTotalSum21:"",
        equipmentTotalSum31:"",
        equipmentTotalSum41:"",
        loginfo:{},
        // 数据集
        countSource: [],
        countFields: [],
        countAliases: [],
        countSource1: [],
        countFields1: [],
        countAliases1: [],
        visitFields:['ip','visit'],
        visitInfo:[],
        img:'/light.jpg',
        img_electricity:'/electricity.jpg',
        url: {
          getEquipmentTotalNumber: "/glr/glrAnalysis/getEquipmentTotalNumber",
          lightReportChart:"/glr/glrLightData/lightReportChart",
        }
      }
    },
    created() {
      const that = this
      setTimeout(() => {
        that.loading = !that.loading
      }, 1000)
      that.initLogInfo();

      httpAction(that.url.getEquipmentTotalNumber,null,"post").then((res)=>{
        if(res.success){
          that.equipmentTotalSum10=res.result.sum10;
          that.equipmentTotalSum11=res.result.sum11;
          that.equipmentTotalSum12=res.result.sum12;
          that.equipmentTotalSum13=(that.equipmentTotalSum12/that.equipmentTotalSum11)*100;
          var ss=(that.equipmentTotalSum13+'').split(".");
          that.equipmentTotalSum13=ss[0];
          that.equipmentTotalSum21=res.result.sum21;
          that.equipmentTotalSum31=res.result.sum31.toFixed(2);
          that.equipmentTotalSum41=res.result.sum41.toFixed(2);
        }else{
          that.$message.warning(res.message);
        }
      }).finally(() => {
        that.confirmLoading = false;
      })

      var year=moment(new Date()).format("YYYY")
      var month=moment(new Date()).format("MM")
      that.loadDate1(this.url.lightReportChart,'year',{ligCode:'',gatawayCode:'',year:year,month:month,type:11});
      that.loadDate2(this.url.lightReportChart,'year',{ligCode:'',gatawayCode:'',year:year,month:"00",type:11});
    },
    methods: {
      loadDate1(url,type,param) {
        getAction(url,param,'get').then((res) => {
          this.countFields=['day_Electricity_List','economy_Electricity_List'];
          this.countAliases=[{field:'day_Electricity_List',alias:this.$t('home.averageElectricityConsumption')}, {field:'economy_Electricity_List',alias:this.$t('home.saveElectricityOnAverage')}]
          let dateList=res.dateList;
          let day_Electricity_List=res.day_Electricity_List;
          let economy_Electricity_List=res.economy_Electricity_List;
          let bb=[]
          for(var j = 0,len=dateList.length; j < len; j++) {
            let aa={ type: dateList[j], day_Electricity_List: day_Electricity_List[j], economy_Electricity_List: economy_Electricity_List[j] };
            bb.push(aa);
          }
          this.countSource=bb;
        })
      },
      loadDate2(url,type,param) {
        getAction(url,param,'get').then((res) => {
          this.countFields1=['day_Electricity_List','economy_Electricity_List'];
          this.countAliases1=[{field:'day_Electricity_List',alias:'平均用电量(KWH)'}, {field:'economy_Electricity_List',alias:'平均节约用电量(KWH)'}]
          let dateList=res.dateList;
          let day_Electricity_List=res.day_Electricity_List;
          let economy_Electricity_List=res.economy_Electricity_List;
          let bb=[]
          for(var j = 0,len=dateList.length; j < len; j++) {
            let aa={ type: dateList[j], day_Electricity_List: day_Electricity_List[j], economy_Electricity_List: economy_Electricity_List[j] };
            bb.push(aa);
          }
          this.countSource1=bb;
        })
      },
      initLogInfo () {
        getLoginfo(null).then((res)=>{
          if(res.success){
            Object.keys(res.result).forEach(key=>{
              res.result[key] =res.result[key]+""
            })
            this.loginfo = res.result;
          }
        })
        getVisitInfo().then(res=>{
          if(res.success){
            console.log("aaaaaa",res.result)
            this.visitInfo = res.result;
          }
        })
      },
    }
  }
</script>

<style scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }

  .icons-list >>> .anticon {
    margin-right: 6px;
    font-size: 24px;
  }
</style>

/*
https://www.antdv.com/components/icon-cn/
*/